import { StyleSheet } from 'react-native'
import { View, Input, SearchIcon, ScrollView } from 'native-base'
import React, { useEffect, useState, createRef } from 'react'
import axios from '../../axios'
import Menu from '../../components/Menu'
import Banner from '../../components/Banner'
import GoodsList from '../../components/Goods/GoodsList'
import FlatList from '../../components/FlatList'
import GoodsItem from '../../components/Goods/GoodsItem'
import Search from '../../components/Search'

const Home = (props) => {
  const { navigation } = props
  const [goodsList, setGoodsList] = useState([])
  const [bannerList, setBannerList] = useState([])
  const [categoryList, setCategoryList] = useState([])
  const [refreshing, setRefreshing] = useState(false)

  useEffect(() => {
    axios.get('/home').then(res => {
      setBannerList(res.data.bannerList)
      setCategoryList(res.data.cateList)
      setGoodsList(res.data.goodsList)
      console.log('====>来了', props)
      // console.log(res.data.goodsList)
      // setTimeout(() => {
      //   setRefreshing(false)
      // }, 200)
    }).catch(err => {
      console.log(err)
    })
  }, [refreshing])
  const search = (e) => {
    console.log('click', e.nativeEvent)
    navigation.navigate('GoodsResult', {
      keyword: e.nativeEvent.text
    })
  }

  const onRefresh = () => {
    console.log('onRefresh')
    // setRefreshing(true)
  }
  return (
    <View style={styles.container}>
      <Search onSubmitEditing={(e) => search(e)} />
      {/* <View> */}
      <FlatList data={goodsList} renderItem={GoodsItem} 
        numColumns={2}
        refreshing={refreshing}
        onRefresh={onRefresh}
        ListHeaderComponent={() => {
        return (
          <>
            <Banner style={styles.banner} list={bannerList} keyName='imageUrl' />
            <Menu list={categoryList}></Menu>
          </>
        )
      }}>
        {/* <GoodsList list={goodsList} /> */}
      </FlatList>
      {/* </View> */}
    </View>
  )
}

export default Home

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 6,
    paddingVertical: 10
  },
  banner: {
    marginVertical: 10
  }
})